<*****评估报告*****>
<template>
    <div id="compReport" class="report-page-table" :style="{fontSize:fontSize+'px'}"><!---->
      <Row class="reportHeader">
      	<div style="font-size:20px;">
      		<!--<div class="收起"></div>-->
      		<span>报告 </span>
      		|
      		<span style="font-weight:bold;">{{USER_NAME}}</span>
      		<Button type="primary" ghost @click="downloadReports" size="small" style="float:right;margin-top:14px;margin-left:14px;" >
  				<img src="../../assets/baseInfo/download.png" alt="" style="vertical-align:text-top;"/> 下载报告
  	    	</Button>
      	    <ButtonGroup size="small" class="opGroup" style="float:right;margin-top:14px;">
		        <Button icon="ios-remove" @click="zoomIn" :disabled="scale == 0.5 || disSub"></Button>
		        <Button type="dashed" style="border-color:#dcdee2;color:#000;width:40px;">{{scale}}</Button>
		        <Button icon="ios-add" @click="zoomOut" :disabled="scale == 3"></Button>
		    </ButtonGroup>
      	</div>
      </Row>
      <div class="reportContent">
      		<div class="page1 page" :style="pageMargin" >
				<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
	      			<header class="pageHeader">
	      				<!-- <img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:9.714em;height:auto;"/> -->
	      				<!-- <img :src="reportImg" v-if="!reportImg" alt="logo" style="width:9.714em;height:auto;"/>
								{{ reportImg }} -->
	      			</header>
	      			<div class="pageContent" style="height:72.5%;">
	      				<div style="text-align:center;">
	      				    <h1 style="font-size:3em;color: #1b1c29;">学习评估报告</h1>
	      				    <!-- <small>LEARNNING ABILITY ASSESSMENT REPORT</small> -->
	      				</div>
	      				<div class="avatar">
	      					<!-- <div class="avatar-bg" :style="{'background-image':`url(${reportImg})`}"> -->
	      					<div class="avatar-bg">
	      						<img :src="reportImg" alt="" v-if="reportImg"/>
	      						<img src="../..//assets/baseInfo/defult.jpg" alt="" v-else/>
	      					</div>
	      				</div>
	      				<div class="examInfo" style="width:20.285em;height:1.143em;margin:3.571em auto;">
	      					<p><span class="itemLabel">昵称</span><span class="itemValue">{{USER_NAME}}</span></p>
	      					<p><span class="itemLabel">单位</span><span class="itemValue">{{company}}</span></p>
	      					<p><span class="itemLabel">报告日期</span><span class="itemValue">{{date}}</span></p>
	      				</div>
	      			</div>
							<footer class="pageFooter" v-if="configReportFooter == '1'">
	      				<Row>
	      					<Col span="4" v-if="showSysLogo">
	      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
	      					</Col>
	      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
	      					   <p style="padding:7px 0;color:#333;">
	      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
	      					   	   <span style="float:right;">
	      					       <!--
	      					       <span>邮编:100089</span>
	      					       <span style="margin-left:20px;">电话:xxx</span>
	      					       -->
	      					       </span>
	      					   </p>
	      					   <p style="color:#666;">{{configInstruction}}
	      					   </p>
	      					</Col>
	      				</Row>
	      			</footer>
				</div>
	      		<img src="../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
      		<div class="page2 page" :style="pageMargin">
				<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
	      			<header class="pageHeader" style="text-align:center;">
	      				<h1 style="font-size:2em;color:#333;">学习评估报告</h1>
	      				<div class="line" style="height:7px;border-top:1px solid #696969;border-bottom:2px solid #696969;margin:10px 0;"></div>
	      			</header>
	      			<div class="pageContent page2Content" >
	      				<Row style="height:30%;" :style="{ height: configReportFooter == '1' ? '36%' : '30%' }">
	      					<Col span="12" style="height:100%">
		      				    <div class="chart" style="padding:.8em;">
		      				    	<p style="font-size:0.8em;font-weight:bold;">学习总课时</p>
		      				    	<div id="learnTimeStatistics"></div>
		      				    </div>
	      				    </Col>
	      				    <Col span="12" style="height:100%">
	      				    	<div class="chart" style="float:right;padding:.8em;">
	      				    		<p style="font-size:0.8em;font-weight:bold;">学习总次数</p>
	      				    		<div id="learnCountStatistics"></div>
	      				    	</div>
	      				    </Col>
	      				</Row>
	      				<Row style="height:36%;" :style="{ height: configReportFooter == '1' ? '42%' : '36%' }">
	      					<div class="chart" style="height:96%;width:100%;padding:.8em;">
		      					<p style="font-size:0.8em;font-weight:bold;">考试成绩走势</p>
		      					<div id="examAnalysis"></div>
		      				</div>
	      				</Row>
	      				<Row style="height:35%;" :style="{ height: configReportFooter == '1' ? '41%' : '35%' }" v-show="!hideCompet">
	      					<Col span="12" style="height:100%">
		      				    <div class="chart" style="height:100%;padding:.8em;">
		      				    	<p style="font-size:0.8em;font-weight:bold;">演练得分走势</p>
		      				    	<div id="drillScoreAnalysis"></div>
		      				    </div>
	      				    </Col>
	      				    <Col span="12" style="height:100%">
	      				    	<div id="errorRate" class="chart" style="float:right;height:100%;padding:.8em;">
	      				    		<p style="font-size:0.8em;font-weight:bold;">竞赛得分走势</p>
		      				    	<div id="competeScoreAnalysis"></div>
	      				    	</div>
	      				    </Col>
	      				</Row>
      				<!--<Row style="height:38%;">
			          <!--<Col span="24">
			            <div class="title">
			              <i></i>
			              <span>得分趋势分析</span>
			            </div>
			          </Col>-->
			          <!--<Col span="24" style="height:100%">
			            <div id="scoreAnalysis" class="chart"></div>
			          </Col>-->
			        <!--</Row>-->
      				</div>
	      			<footer class="pageFooter" v-if="configReportFooter != '1'">
	      				<Row>
	      					<Col span="4" v-if="showSysLogo">
	      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
	      					</Col>
	      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
	      					   <p style="padding:7px 0;color:#333;">
	      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
	      					   	   <span style="float:right;">
	      					       <!--
	      					       <span>邮编:100089</span>
	      					       <span style="margin-left:20px;">电话:xxx</span>
	      					       -->
	      					       </span>
	      					   </p>
	      					   <p style="color:#666;">{{configInstruction}}
	      					   </p>
	      					</Col>
	      				</Row>
	      			</footer>
	      		</div>
      			<img src="../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
      		<div class="page2 page" :style="pageMargin"   v-show="!hideCompet">
				<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
	      			<header class="pageHeader" style="text-align:center;">
	      				<h1 style="font-size:2em;color:#333;">学习评估报告</h1>
	      				<div class="line" style="height:7px;border-top:1px solid #696969;border-bottom:2px solid #696969;margin:10px 0;"></div>
	      			</header>
	      			<div class="pageContent page2Content">

	      				<Row style="height:100%;">
	      					<div class="chart" ref="skillTree" style="height:98%;width:100%;padding:.1em;"
										:style="{ border: configReportFooter == '1' ? 'unset' : '' }">
		      					<span style="font-size:0.8em;font-weight:bold;">技能树</span>
		      					<div id="skillTree"></div>
		      				</div>
	      				</Row>
								<!-- <Row style="height:42%;">
	      					<Col span="12" style="height:100%">
		      				    <div class="chart" style="height:100%;padding:.1em;">
		      				    	<span style="font-size:0.8em;font-weight:bold;">学习覆盖程度</span>
		      				    	<div id="competeScor"></div>
		      				    </div>
	      				    </Col>
	      				    <Col span="12" style="height:100%">
	      				    	<div class="chart" style="float:right;height:100%;padding:.1em;">
	      				    		<span style="font-size:0.8em;font-weight:bold;">积分能力</span>
												<div id="userIntegral"></div>
	      				    	</div>
	      				    </Col>
	      				</Row> -->
      				</div>
	      			<footer class="pageFooter" v-if="configReportFooter != '1'">
	      				<Row>
	      					<Col span="4" v-if="showSysLogo">
	      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
	      					</Col>
	      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
	      					   <p style="padding:7px 0;color:#333;">
	      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
	      					   	   <span style="float:right;">
	      					       </span>
	      					   </p>
	      					   <p style="color:#666;">{{configInstruction}}
	      					   </p>
	      					</Col>
	      				</Row>
	      			</footer>
	      		</div>
      			<img src="../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
      		<div class="page2 page" :style="pageMargin">
				<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
	      			<header class="pageHeader" style="text-align:center;">
	      				<h1 style="font-size:2em;color:#333;">学习评估报告</h1>
	      				<div class="line" style="height:7px;border-top:1px solid #696969;border-bottom:2px solid #696969;margin:10px 0;"></div>
	      			</header>
	      			<div class="pageContent page2Content">

	      				<Row style="height:100%;">
	      					  <div class="chart" ref="competeScor" style="height:100%;padding:.1em;"
											:style="{ border: configReportFooter == '1' ? 'unset' : '' }">
		      				    	<span style="font-size:0.8em;font-weight:bold;">学习覆盖程度</span>
		      				    	<div id="competeScor"></div>
		      				    </div>
	      				</Row>
								<!-- <Row style="height:42%;">
	      					<Col span="12" style="height:100%">
		      				    <div class="chart" style="height:100%;padding:.1em;">
		      				    	<span style="font-size:0.8em;font-weight:bold;">学习覆盖程度</span>
		      				    	<div id="competeScor"></div>
		      				    </div>
	      				    </Col>
	      				    <Col span="12" style="height:100%">
	      				    	<div class="chart" style="float:right;height:100%;padding:.1em;">
	      				    		<span style="font-size:0.8em;font-weight:bold;">积分能力</span>
												<div id="userIntegral"></div>
	      				    	</div>
	      				    </Col>
	      				</Row> -->
      				</div>
	      			<footer class="pageFooter" v-if="configReportFooter != '1'">
	      				<Row>
	      					<Col span="4" v-if="showSysLogo">
	      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
	      					</Col>
	      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
	      					   <p style="padding:7px 0;color:#333;">
	      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
	      					   	   <span style="float:right;">
	      					       </span>
	      					   </p>
	      					   <p style="color:#666;">{{configInstruction}}
	      					   </p>
	      					</Col>
	      				</Row>
	      			</footer>
	      		</div>
      			<img src="../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
      		<div class="page2 page" :style="pageMargin">
				<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
	      			<header class="pageHeader" style="text-align:center;">
	      				<h1 style="font-size:2em;color:#333;">学习评估报告</h1>
	      				<div class="line" style="height:7px;border-top:1px solid #696969;border-bottom:2px solid #696969;margin:10px 0;"></div>
	      			</header>
	      			<div class="pageContent page2Content">

	      				<Row style="height:100%;">
	      					  <div class="chart" ref="userIntegral" style="float:right;height:100%;padding:.1em;"
											:style="{ border: configReportFooter == '1' ? 'unset' : '' }">
	      				    		<span style="font-size:0.8em;font-weight:bold;">积分能力</span>
												<div id="userIntegral"></div>
	      				    	</div>
	      				</Row>
								<!-- <Row style="height:42%;">
	      					<Col span="12" style="height:100%">
		      				    <div class="chart" style="height:100%;padding:.1em;">
		      				    	<span style="font-size:0.8em;font-weight:bold;">学习覆盖程度</span>
		      				    	<div id="competeScor"></div>
		      				    </div>
	      				    </Col>
	      				    <Col span="12" style="height:100%">
	      				    	<div class="chart" style="float:right;height:100%;padding:.1em;">
	      				    		<span style="font-size:0.8em;font-weight:bold;">积分能力</span>
												<div id="userIntegral"></div>
	      				    	</div>
	      				    </Col>
	      				</Row> -->
      				</div>
	      			<footer class="pageFooter" v-if="configReportFooter != '1'">
	      				<Row>
	      					<Col span="4" v-if="showSysLogo">
	      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
	      					</Col>
	      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
	      					   <p style="padding:7px 0;color:#333;">
	      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
	      					   	   <span style="float:right;">
	      					       </span>
	      					   </p>
	      					   <p style="color:#666;">{{configInstruction}}
	      					   </p>
	      					</Col>
	      				</Row>
	      			</footer>
	      		</div>
      			<img src="../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
      		<div class="page3 page" :style="pageMargin" v-for="(item,index) in videoPageInfo.listPageNumArr" :key="item" v-if="videoPageInfo.listPageNumArr">
      			<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
				<header class="pageHeader" style="text-align:center;">
      				<h1 style="font-size:2em;color:#333;">学习评估报告</h1>
      				<div class="line" style="height:7px;border-top:1px solid #b3b3b3;border-bottom:2px solid #696969;margin:10px 0;"></div>
      			</header>
      			<div  class="pageContent page3Content" :style="{ height: configReportFooter == '1' ? '50em' : '42em' }">
      				<h4 style="margin-bottom:12px;">自学视频</h4>
							<Row class="itemRow" v-for="(currentRow,indexRow) in makeListRows(index,videoList,videoPageInfo)" :key="indexRow">
      					<Col v-if="getCurPageShow(index,videoList,videoPageInfo)[2*currentRow]" span="12"  class="listItem">{{getCurPageShow(index,videoList,videoPageInfo)[2*currentRow].name}}</Col>
								<Col v-if="getCurPageShow(index,videoList,videoPageInfo)[2*currentRow+1]" span="12"  class="listItem">{{getCurPageShow(index,videoList,videoPageInfo)[2*currentRow+1].name}}</Col>
      				</Row>
      				<!-- <Row>
      					<Col span="12" v-for="(video,index1) in getCurPageShow(index,videoList,videoPageInfo)" :key="index1" class="listItem">{{video.name}}</Col>

      				</Row> -->
      				<!--<Table stripe :columns="nameCol" :data="getCurPageShow(index,this.courseList)" id="rankTable"></Table>-->
      			</div>
      			<footer class="pageFooter" v-if="configReportFooter != '1'">
      				<Row>
      					<Col span="4" v-if="showSysLogo">
      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
      					</Col>
      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
      					   <p style="padding:7px 0;color:#333;">
      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
      					   	   <span style="float:right;">
      					       <!--
      					       <span>邮编:100089</span>
      					       <span style="margin-left:20px;">电话:xxx</span>
      					       -->
      					       </span>
      					   </p>
      					   <p style="color:#666;">{{configInstruction}}
      					   </p>
      					</Col>
      				</Row>
      			</footer>
				</div>
      			<img src="../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
      		<div class="page3 page" :style="pageMargin" v-for="(item,index) in expPageInfo.listPageNumArr" :key="item" v-if="videoPageInfo.listPageNumArr">
      			<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
				<header class="pageHeader" style="text-align:center;">
      				<h1 style="font-size:2em;color:#333;">学习评估报告</h1>
      				<div class="line" style="height:7px;border-top:1px solid #b3b3b3;border-bottom:2px solid #696969;margin:10px 0;"></div>
      			</header>
      			<div  class="pageContent page3Content" :style="{ height: configReportFooter == '1' ? '50em' : '42em' }">
      				<h4 style="margin-bottom:12px;">自学/课件</h4>
							<Row class="itemRow" v-for="(currentRow,indexRow) in makeListRows(index,expList,expPageInfo)" :key="indexRow">
      					<Col v-if="getCurPageShow(index,expList,expPageInfo)[2*currentRow]" span="12"  class="listItem">{{getCurPageShow(index,expList,expPageInfo)[2*currentRow].name}}</Col>
								<Col v-if="getCurPageShow(index,expList,expPageInfo)[2*currentRow+1]" span="12"  class="listItem">{{getCurPageShow(index,expList,expPageInfo)[2*currentRow+1].name}}</Col>
      				</Row>
      				<!-- <Row>
      					<Col span="12" v-for="(video,index1) in getCurPageShow(index,expList,expPageInfo)" :key="index1" class="listItem">{{video.name}}</Col>

      				</Row> -->
      				<!--<Table stripe :columns="nameCol" :data="getCurPageShow(index,this.courseList)" id="rankTable"></Table>-->
      			</div>
      			<footer class="pageFooter" v-if="configReportFooter != '1'">
      				<Row>
      					<Col span="4" v-if="showSysLogo">
      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
      					</Col>
      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
      					   <p style="padding:7px 0;color:#333;">
      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
      					   	   <span style="float:right;">
      					       <!--
      					       <span>邮编:100089</span>
      					       <span style="margin-left:20px;">电话:xxx</span>
      					       -->
      					       </span>
      					   </p>
      					   <p style="color:#666;">{{configInstruction}}
      					   </p>
      					</Col>
      				</Row>
      			</footer>
				</div>
      			<img src="../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
      		<div class="page3 page" :style="pageMargin" v-for="(item,index) in coursePageInfo.listPageNumArr" :key="item" v-if="videoPageInfo.listPageNumArr">
      			<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
				<header class="pageHeader" style="text-align:center;">
      				<h1 style="font-size:2em;color:#333;">学习评估报告</h1>
      				<div class="line" style="height:7px;border-top:1px solid #b3b3b3;border-bottom:2px solid #696969;margin:10px 0;"></div>
      			</header>
      			<div  class="pageContent page3Content" :style="{ height: configReportFooter == '1' ? '50em' : '42em' }">
      				<h4 style="margin-bottom:12px;">自学课程</h4>
							<Row class="itemRow" v-for="(currentRow,indexRow) in makeListRows(index,courseList,coursePageInfo)" :key="indexRow">
      					<Col v-if="getCurPageShow(index,courseList,coursePageInfo)[2*currentRow]" span="12"  class="listItem">{{getCurPageShow(index,courseList,coursePageInfo)[2*currentRow].name}}</Col>
								<Col v-if="getCurPageShow(index,courseList,coursePageInfo)[2*currentRow+1]" span="12"  class="listItem">{{getCurPageShow(index,courseList,coursePageInfo)[2*currentRow+1].name}}</Col>
      				</Row>
      				<!-- <Row>
      					<Col span="12" v-for="(video,index1) in getCurPageShow(index,courseList,coursePageInfo)" :key="index1" class="listItem">{{video.name}}</Col>

      				</Row> -->
      				<!--<Table stripe :columns="nameCol" :data="getCurPageShow(index,this.courseList)" id="rankTable"></Table>-->
      			</div>
      			<footer class="pageFooter" v-if="configReportFooter != '1'">
      				<Row>
      					<Col span="4" v-if="showSysLogo">
      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
      					</Col>
      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
      					   <p style="padding:7px 0;color:#333;">
      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
      					   	   <span style="float:right;">
      					       <!--
      					       <span>邮编:100089</span>
      					       <span style="margin-left:20px;">电话:xxx</span>
      					       -->
      					       </span>
      					   </p>
      					   <p style="color:#666;">{{configInstruction}}
      					   </p>
      					</Col>
      				</Row>
      			</footer>
				</div>
      			<img src="../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
      		<div class="page3 page" :style="pageMargin" v-for="(item,index) in classCoursePageInfo.listPageNumArr" :key="item" v-if="videoPageInfo.listPageNumArr">
      			<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
			<header class="pageHeader" style="text-align:center;">
      				<h1 style="font-size:2em;color:#333;">学习评估报告</h1>
      				<div class="line" style="height:7px;border-top:1px solid #b3b3b3;border-bottom:2px solid #696969;margin:10px 0;"></div>
      			</header>
      			<div  class="pageContent page3Content" :style="{ height: configReportFooter == '1' ? '50em' : '42em' }">
      				<h4 style="margin-bottom:12px;">上课统计</h4>
							<!-- <Row class="itemRow" v-for="(currentRow,indexR) in getCurPageShow(index,classCourseList,classCoursePageInfo)" :key="indexR">
      					<Col v-if="getCurPageShow(index,classCourseList,classCoursePageInfo)[2*indexR]" span="12"  class="listItem">{{getCurPageShow(index,classCourseList,classCoursePageInfo)[2*indexR].name}}</Col>
								<Col v-if="getCurPageShow(index,classCourseList,classCoursePageInfo)[2*indexR+1]" span="12"  class="listItem">{{getCurPageShow(index,classCourseList,classCoursePageInfo)[2*indexR+1].name}}</Col>
      				</Row> -->
					  <Table
						slot="table"
						:hiddenIndex="true"
						:columns="classCol"
						:data="getCurPageShow(index,classCourseList,classCoursePageInfo)"></Table>
							 <!-- 原来 -->
      				<!-- <Row class="itemRow" v-for="currentRow in Array.from(getCurPageShow(index,classCourseList,classCoursePageInfo).map(i=>i))" :key="currentRow">
      					<Col span="12" v-for="(video,index1) in getCurPageShow(index,classCourseList,classCoursePageInfo)[2*currentRow]" :key="index1" class="listItem">{{video.name}}</Col>
								<Col span="12" v-for="(video,index1) in getCurPageShow(index,classCourseList,classCoursePageInfo)[2*currentRow+1]" :key="index1" class="listItem">{{video.name}}</Col>
      				</Row> -->
      			</div>
      			<footer class="pageFooter" v-if="configReportFooter != '1'">
      				<Row>
      					<Col span="4" v-if="showSysLogo">
      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
      					</Col>
      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
      					   <p style="padding:7px 0;color:#333;">
      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
      					   	   <span style="float:right;">
      					       <!--
      					       <span>邮编:100089</span>
      					       <span style="margin-left:20px;">电话:xxx</span>
      					       -->
      					       </span>
      					   </p>
      					   <p style="color:#666;">{{configInstruction}}
      					   </p>
      					</Col>
      				</Row>
      			</footer>
				</div>
      			<img src="../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
      		<div class="page3 page" :style="pageMargin" v-for="(item,index) in drillPageInfo.listPageNumArr" :key="item" v-if="drillPageInfo.listPageNumArr.length > 0">
      			<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
				<header class="pageHeader" style="text-align:center;">
      				<h1 style="font-size:2em;color:#333;">学习评估报告</h1>
      				<div class="line" style="height:7px;border-top:1px solid #b3b3b3;border-bottom:2px solid #696969;margin:10px 0;"></div>
      			</header>
      			<div  class="pageContent page3Content" :style="{ height: configReportFooter == '1' ? '50em' : '42em' }">
      				<h4 style="margin-bottom:12px;">演练统计</h4>
      				<Table stripe :columns="drillCol" :data="getCurPageShow(index,drillList,drillPageInfo)" id="rankTable"></Table>
      			</div>
      			<footer class="pageFooter" v-if="configReportFooter != '1'">
      				<Row>
      					<Col span="4" v-if="showSysLogo">
      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
      					</Col>
      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
      					   <p style="padding:7px 0;color:#333;">
      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
      					   	   <span style="float:right;">
      					       <!--
      					       <span>邮编:100089</span>
      					       <span style="margin-left:20px;">电话:xxx</span>
      					       -->
      					       </span>
      					   </p>
      					   <p style="color:#666;">{{configInstruction}}
      					   </p>
      					</Col>
      				</Row>
      			</footer>
				</div>
      			<img src="../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
      		<div class="page3 page" :style="pageMargin" v-for="(item,index) in competePageInfo.listPageNumArr" :key="item" v-if="drillPageInfo.listPageNumArr.length > 0">
      			<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
      			<header class="pageHeader" style="text-align:center;">
      				<h1 style="font-size:2em;color:#333;">学习评估报告</h1>
      				<div class="line" style="height:7px;border-top:1px solid #b3b3b3;border-bottom:2px solid #696969;margin:10px 0;"></div>
      			</header>
      			<div  class="pageContent page3Content" :style="{ height: configReportFooter == '1' ? '50em' : '42em' }">
      				<h4 style="margin-bottom:12px;">竞赛统计</h4>
      				<Table stripe :columns="drillCol" :data="getCurPageShow(index,competeList,competePageInfo)" id="rankTable"></Table>
      			</div>
      			<footer class="pageFooter" v-if="configReportFooter != '1'">
      				<Row>
      					<Col span="4" v-if="showSysLogo">
      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
      					</Col>
      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
      					   <p style="padding:7px 0;color:#333;">
      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
      					   	   <span style="float:right;">
      					       <!--
      					       <span>邮编:100089</span>
      					       <span style="margin-left:20px;">电话:xxx</span>
      					       -->
      					       </span>
      					   </p>
      					   <p style="color:#666;">{{configInstruction}}
      					   </p>
      					</Col>
      				</Row>
      			</footer>
				</div>
      			<img src="../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>


        <div class="page3 page" :style="pageMargin">
          <div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
            <header class="pageHeader" style="text-align:center;">
              <h1 style="font-size:2em;color:#333;">学习评估报告</h1>
              <div class="line" style="height:7px;border-top:1px solid #b3b3b3;border-bottom:2px solid #696969;margin:10px 0;"></div>
            </header>
            <div  class="pageContent page3Content" :style="{ height: configReportFooter == '1' ? '50em' : '42em' }">
              <h4 style="margin-bottom:12px;" class="reportHeaderTitleColor">综合评估</h4>
              <div class="report-summary">
                <div class="report-item-sum">

                    <span>{{USER_NAME}}</span>
                    在 <span> {{sum.c1}} </span> 至 <span> {{sum.c2}}</span>  期间，
                    积极参与了自学、课件、上课、考试<span v-show="!hideCompet">和竟赛演练</span>等学习活动，学习总课时为<span> {{sum.c3||0}} </span>小时，学习总次数为<span> {{sum.c4||0}} </span>次。
                    学习综合成绩呈现出<span> {{sum.c5}} </span>的趋势，表现出<span> {{sum.c6}} </span> 的学习能力。
                </div>
                <div class="report-item-sum">
                  共参与了自学、课件<span> {{sum.c7||0}} </span>次，统计数据显示 <span>{{USER_NAME}}</span> 积极完成了多种类型的课件自学，
                    尤其是<span> {{sum.c8}} </span>，巩固了所学知识，并培养了解决问题的能力。
                </div>
                <div class="report-item-sum">
                  共参与了上课<span> {{sum.c9||0}} </span>次，上课总用时<span> {{sum.c10||0 }}  </span>小时，
                  报告评级为优<span> {{sum.c11||0}} </span>次，良<span> {{sum.c12||0}} </span>次，差<span> {{sum.c13||0}} </span>次。
                  统计数据显示 <span>{{USER_NAME}}</span>投入时间和精力，参与教学活动后，成绩<span>{{sum.c14}}。</span>
                </div>
                <div class="report-item-sum">
                  <span v-show="!hideCompet">技能树、</span>学习覆盖程度与学习积分能力显示 <span>{{USER_NAME}}</span><span>{{sum.c15}}。</span>
                </div>
                <div class="report-item-sum">
                </div>
                <div class="report-item-sum">
                  共参与了<span> {{sum.c16||0}} </span>场考试，平均用时<span> {{sum.c17||0}} </span>小时，平均成绩<span> {{sum.c18||0}} </span>分，
                    考试成绩走势呈现出<span> {{sum.c20}} </span>的趋势，表现出<span> {{sum.c21}} </span>的学习能力。
<!--                    共参与了演练<span> {{sum.c22||0}} </span>次，平均得分<span> {{sum.c23||0}} </span>分;-->
<!--                    共参与了竟赛<span> {{sum.c25||0}} </span>次，平均得分<span> {{sum.c26||0}} </span>分。-->
<!--                    演练和竟赛得分走势显示<span> {{USER_NAME}} </span>在攻防实战中<span> {{sum.c28||0}}。</span>-->
                </div>
                <div class="report-item-sum">

                  综合以上，<span>{{USER_NAME}}</span> 积分总排名为：第<span> {{sum.c19||99999}} </span>名，
                  在学习中<span> {{sum.c29}} </span>，在理论和实践方面均取得了<span> {{sum.c30}} </span>。
                  <span>{{USER_NAME}}</span> 应继续努力，不断提升学习能力，为未来的学习和发展奠定坚实基础。
                </div>
              </div>
            </div>
            <footer class="pageFooter" v-if="configReportFooter != '1'">
              <Row>
                <Col span="4" v-if="showSysLogo">
                  <img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
                </Col>
                <Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
                  <p style="padding:7px 0;color:#333;">
                    <span>中国<span class="dot"></span>{{configAddress}}</span>
                    <span style="float:right;">
      					       <!--
      					       <span>邮编:100089</span>
      					       <span style="margin-left:20px;">电话:xxx</span>
      					       -->
      					       </span>
                  </p>
                  <p style="color:#666;">{{configInstruction}}
                  </p>
                </Col>
              </Row>
            </footer>
          </div>
          <img src="../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
        </div>





        <div style="width:42.5em;height:1px;visibility: hidden;"></div>
      		<div style="width:42.5em;height:1px;visibility: hidden;" v-if="scale == 0.5"></div>
      	<!--</Col>-->
      </div>
	  <!--<Button type="primary" ghost @click="downloadReport" class="downBtn">-->
      <!--<Icon type="ios-arrow-round-down" :size="20" /></Button>-->
    </div>
</template>

<script>
import $ from 'jquery'
import G2 from '@antv/g2'
import DataSet from '@antv/data-set';
import { queryRecordByUid, studentAbilityStatistic, studentAbilityStatisticNew } from '@/api/user.js'
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import mixin from "./mixin"
import { mapState } from 'vuex'
	import {getSeconds,formatSeconds,dayTime} from '@/libs/utils.js';
//import {competeReport,getSceneInfo} from '@/api/drill_compete'
  export default {
    name: 'examReport',
	components: {

	},
    mixins:[mixin],
    data(){
      return {
        hideCompet:this.hideCompet,
          sum:{},// 综合评估
		classCol:[
			{
	            key: 'trainName',
	            title: '培训班名称'
            },
        	{
	            key: 'type',
	            title: '培训类型',
				render: (h, params) => {
					return h('P',this.classType(params.row.type))
				}
            },
            {
	            key: 'name',
	            title: '内容名称',
            },
            {
	            key: 'startTime',
	            title: '学习时间',
            },
			{
	            key: 'expGuideStatistic',
	            title: '指导学习段落统计',
				render: (h, params) => {
					let content = '/'
					if(params.row.type == 0 || params.row.type == 3) {
						content = params.row.expGuideStatistic.completedTotal + '/' + params.row.expGuideStatistic.total
					}
					return h('P',content)
				}
            },
			{
	            key: 'expVideoStatistic',
	            title: '是否完成视频',
				render: (h, params) => {
					let content = '/'
					if(params.row.type == 0 || params.row.type == 1) {
						content = params.row.expVideoStatistic.finished?'是':'否'
					}
					return h('P',content)
				}
            },
			{
	            key: 'answerStatistic',
	            title: '随堂答题统计正确率',
				render: (h, params) => {
					let content = ''
					if(params.row.type !== 2) {
						content = params.row.answerStatistic.expAnswerOkNum + '/' + params.row.answerStatistic.expQuestionNum
					}
					if(params.row.type == 2) {
						content = params.row.totalScore
					}
					return h('P',content)
				}
            },
			{
	      key: 'expReportStatistic',
	      title: '报告评级',
				render: (h, params) => {
					let content = ''
					if(params.row.expReportStatistic && params.row.expReportStatistic.grade) {
						let grade = params.row.expReportStatistic.grade
						content = (grade == 3&&'优') || (grade == 2&&'良') || '差'
					}
					if(params.row.type == 2) {
						content = params.row.examScoreStatistic
					}
					return h('P',content)
				}
            },
        ],
          company:'',
          USER_NAME:'',
          USER_ID:'',
      	dddd:this.$store.state.user.userId,
      	classCourseCol:{

      	},
      	reportCol: [
      	    {
	            key: 'teamName',
	            title: '团队名称'
            },
            {
	            key: 'totalScore',
	            title: '总分'
            },
            {
	            key: 'totalScore',
	            title: '得失分',
	            render:(h,params)=>{
	                return h('span', (params.row.attackScore||0) + "/" + (params.row.defenseScore||0) + "/" + (params.row.exceptScore||0) + "/" + (params.row.exceptLostScore||0))
	            }
            },
            {
	            key: 'totalScore',
	            title: '攻击次数',
	            render:(h,params)=>{
	                return h('span', (params.row.totalCount||0) + "/" + (params.row.attackCount||0) + "/" + (params.row.failCount||0) + "/" + (params.row.defenseFailedCount||0))
	            }
            },
        ],
        drillCol:[
        	{
	            key: 'name',
	            title: '名称'
            },
            {
	            key: 'rank',
	            title: '排名',
	            width:80
            },
            {
	            key: 'score',
	            title: '得分',
	            width:80
            },
            {
	            key: 'startTime',
	            title: '开始时间'
            }
        ],
        reportInfo:{},
        sceneId:this.$route.query.id,
        scale:1,
        fontSize:14,
        rankList:[],
        rankListPageNumArr:[],
        statisticsReportInfo:{},
        videoList:[],
        courseList:[],
        expList:[],
        classCourseList:[],
        drillList:[],
        competeList:[],
        expList:[],
				examList: [],
				skillTreeRoleCovered:[],
				scoresAndCovered: [],
				studyTimeList: [],
        videoPageInfo:{
        	pageCount:0,
        	pageNum:0,
        	listPageNumArr:[]
        },
        coursePageInfo:{
        	pageCount:0,
        	pageNum:0,
        	listPageNumArr:[]
        },
        expPageInfo:{
        	pageCount:0,
        	pageNum:0,
        	listPageNumArr:[]
        },
        classCoursePageInfo:{
        	pageCount:0,
        	pageNum:0,
        	listPageNumArr:[]
        },
        drillPageInfo:{
        	pageCount:0,
        	pageNum:0,
        	listPageNumArr:[]
        },
        competePageInfo:{
        	pageCount:0,
        	pageNum:0,
        	listPageNumArr:[]
        },
        examPageInfo:{
        	pageCount:0,
        	pageNum:0,
        	listPageNumArr:[]
        },
        date:'',
		pageMargin:{},
        sysLogo:'',
        showSysLogo:true,
        disSub:false
      }
    },
    computed:{
			sizeConfigFooter () {
				 return this.configReportFooter == '1' ? 13 : 11;
			},
			tableSizeHeight () {
				 return this.configReportFooter == '1' ? 87 : 0;
			},
    },
    created(){
    },
    watch:{

    },
    filters:{

    },
    mounted(){
    this.USER_NAME=this.$route.query.username
    this.USER_ID=this.$route.query.id
    this.company=this.$route.query.companyName
      this.generateReport();
      this.date = new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate()
      window.onresize = () => {
      	console.log('窗口变化');
      	//let width = (window.innerHtml || document.documentElement.clientWidth);
      	//this.fontSize = (width/1519) * 14;
      	//this.scale = this.fontSize/14;
      	this.drawChart();
				this.calcAllPage();
      	//this.getRankPage();
			}
    },
    beforeDestroy(){

    },
	methods: {
    m2Hour(val){
        if(!/^-?\d+(\.\d+)?$/.test(val)) return val
        val = Number(val)
        let value = val > 0 ? (val / 3600).toFixed(1) : 0
        value = (value+'').replace('.0','')
        return value
    },
    getSummary(list){
      this.sum= {
            c1:'xxxx年xx月xx日',
            c2:'xxxx年xx月xx日',
            c3:'0',
            c4:'0',
            c5:'稳步提升',
            c6:'优异',// 第一段end
            c7:'0',
            c8:'实操课件',// 第二段end
            c9:'0',
            c10:'0',
            c11:'0',
            c12:'0',
            c13:'0',
            c14:'优',//第三段end
            c15:'在各个学习方向发展均衡，表现优秀',
            c16:'0',
            c17:'100',
            c18:'0',
            c19:'0',
            c20:'稳步提升',
            c21:'良好',// 第四段end
            c22:'0',
            c23:'100',
            c24:'0',
            c25:'0',
            c26:'100',
            c27:'0',
            c28:'进步显著，表现优异，攻防能力出色', //第5段end
            c29:'态度积极',
            c30:'显著进步'
        }
      list.forEach((item,i)=>{
          let key = 'c'+(i+1)
          this.sum[key] = item
      })

      // 次数
      this.sum.c7 = this.statisticsReportInfo.courseAbility.total + this.statisticsReportInfo.videoAbility.total +  this.statisticsReportInfo.expAbility.total// 自学
      this.sum.c9 = this.getCount(this.statisticsReportInfo.trainStatistic)// 上课
      this.sum.c16 = this.statisticsReportInfo.examAbility.total // 考试
      this.sum.c22 = this.statisticsReportInfo.drillAbility.total // 演练
      this.sum.c25 = this.statisticsReportInfo.contestAbility.total // 竞赛
      this.sum.c4 = this.sum.c7+this.sum.c9+this.sum.c16+this.sum.c22+this.sum.c25 // 学习总次数


      // 时间
      let totletime = 0
      this.studyTimeList.forEach(item => {
          totletime +=item.time
          if(item.name.includes('上课')){
              this.sum.c10 = this.m2Hour(item.time)// 上课
          }
          if(item.name.includes('考试')){
              let time = item.time / this.sum.c16

              this.sum.c17 = this.m2Hour(time)// 考试
          }
      })
      // 自学 演练 竞赛 无时间
      this.sum.c3 = this.m2Hour(totletime) // 总时间

      // 优良差 c11 ~ c14
      let g3 =0
      let g2 = 0
      let g1 = 0
      let c14='良'
      // params.row.expReportStatistic.grade
      //let gmap ={3:'优',2:'良',1:'差'}
      this.classCourseList.forEach(item=>{
        let grade =(item.expReportStatistic && item.expReportStatistic.grade)||0
        g3 += grade===3?1:0
        g2 += grade===2?1:0
        g1 += grade===1?1:0
      })
      if(g1>g2 && g1>g3){
        c14 = '差'
      }
      if(g3>g1 && g3>g2){
        c14 = '优'
      }
      this.sum.c11 = g3
      this.sum.c12 = g2
      this.sum.c13 = g1
      this.sum.c14 = c14

    },
		classType(type) {
            switch(Number(type)) {
                case 0: return '讲课'
                case 1: return '作业'
                case 2: return '考试'
                case 3: return '教学'
            }
        },
		getTypePage1(data){
			let tableHeight = document.getElementsByClassName('page2Content')[0].clientHeight - this.fontSize*2 - 40;
			tableHeight = 40 * this.fontSize - 50;
			let pageCount = 4; //每页条数
			let pageNum = Math.ceil(data.length/pageCount);
			let listPageNumArr = [];
			for(let i=0;i<pageNum;i++){
				listPageNumArr.push(i+'-'+new Date().getTime()+JSON.stringify(data));
			}
			return {
				pageCount:pageCount,
				pageNum:pageNum,
				listPageNumArr:listPageNumArr
			}
		},
		getCount(data) {
			let count = 0
			data.forEach(ele => {
				ele.statisticTrainNumberVoList.forEach(el => {
					if(el.cnStatus == 2) {
						count++
					}
				})
			})
			return count
		},
		maxValue(data) {
			let maxNum = 0
			data.forEach(ele => {
				if(ele.value > maxNum) {
					maxNum = ele.value
				}
			})
			return Math.round(maxNum/0.8) || 10
		},
		// 积分
		initEchart () {
			const offsetHeight = this.$refs.userIntegral.offsetHeight
			let data = []
			if (this.scoresAndCovered && this.scoresAndCovered.length > 30) {
				this.scoresAndCovered.sort((a, b) => {
					return a.score - b.score;
				});
				data = this.scoresAndCovered.slice(0, 30);
			} else {
				data = this.scoresAndCovered
			}
			const { DataView } = DataSet;
			const dv = new DataView().source(data);
			dv.transform({
				type: 'fold',
				fields: 'score', // 展开字段集
				key: 'user', // key字段
				value: '积分' // value字段
			});
			const chart = new G2.Chart({
				container: 'userIntegral',
				forceFit: true,
				height: offsetHeight - 10,
				padding: [0, 0, 0, 0]
			});
			chart.source(dv, {
				'积分': {
					min: 0,
				}
			});
			chart.coord('polar', {
				// radius: 0.3
				radius: 0.6
			});
			chart.axis('name', {
				line: null,
				tickLine: null,
				grid: {
					lineStyle: {
						lineDash: null
					},
					hideFirstLine: false
				}
			});
			chart.axis('积分', {
				line: null,
				tickLine: null,
				grid: {
					type: 'polygon',
					lineStyle: {
						lineDash: null
					}
				}
			});
			chart.legend(false);
			chart.line().position('name*积分').color('#2d8cf0')
				.size(2);
			chart.point().position('name*积分').color('#2d8cf0')
				.shape('circle')
				.size(4)
				.style({
					stroke: '#fff',
					lineWidth: 1,
					fillOpacity: 1
				});
			chart.area().position('name*积分').color('#2d8cf0');
			chart.render();
		},
		// 覆盖率
		integralCover () {
			const offsetHeight = this.$refs.competeScor.offsetHeight
			let data = []
			if (this.scoresAndCovered && this.scoresAndCovered.length > 30) {
				this.scoresAndCovered.sort((a, b) => {
					return a.process - b.process;
				});
				data = this.scoresAndCovered.slice(0, 30);
			} else {
				data = this.scoresAndCovered
			}
			data.forEach(item => {
				item.process = parseFloat(item.process)
			})
			const { DataView } = DataSet;
			const dv = new DataView().source(data);
			dv.transform({
				type: 'fold',
				fields: 'process', // 展开字段集
				key: 'user', // key字段
				value: '覆盖度' // value字段
			});
			const chart = new G2.Chart({
				container: 'competeScor',
				forceFit: true,
				height: offsetHeight - 10,
				padding: [0, 0, 0, 0]
			});
			chart.source(dv, {
				'覆盖度': {
					min: 0,
					// max: 100
				}
			});
			chart.coord('polar', {
				// radius: 0.3
				radius: 0.6
			});
			chart.axis('name', {
				line: null,
				tickLine: null,
				grid: {
					lineStyle: {
						lineDash: null
					},
					hideFirstLine: false
				}
			});
			chart.axis('覆盖度', {
				line: null,
				tickLine: null,
				grid: {
					type: 'polygon',
					lineStyle: {
						lineDash: null
					}
				}
			});
			chart.legend(false);
			chart.line().position('name*覆盖度').color('#2d8cf0')
				.size(2).tooltip('name*覆盖度', (x, a) => {
					return {
						name: '覆盖度',
						value: `${a}%`
					}
				});
			chart.point().position('name*覆盖度').color('#2d8cf0')
				.shape('circle')
				.size(4)
				.style({
					stroke: '#fff',
					lineWidth: 1,
					fillOpacity: 1
				}).tooltip('name*覆盖度', (x, a) => {
					return {
						name: '覆盖度',
						value: `${a}%`
					}
				});
			chart.area().position('name*覆盖度').color('#2d8cf0').tooltip('name*覆盖度', (x, a) => {
				return {
					name: '覆盖度',
					value: `${a}%`
				}
			});
			chart.render();
		},

		// 技能树
		skillCover () {
			let offsetHeight = this.$refs.skillTree.offsetHeight
			let data = []
			if (this.skillTreeRoleCovered && this.skillTreeRoleCovered.length > 30) {
				this.skillTreeRoleCovered.sort((a, b) => {
					return a.process - b.process;
				});
				data = this.skillTreeRoleCovered.slice(0, 30);
			} else {
				data = this.skillTreeRoleCovered
			}
			data.forEach(item => {
				item.process = parseFloat(item.process)
			})
			const { DataView } = DataSet;
			const dv = new DataView().source(data);
			dv.transform({
				type: 'fold',
				fields: 'process', // 展开字段集
				key: 'user', // key字段
				value: '完成度' // value字段
			});
			const chart = new G2.Chart({
				container: 'skillTree',
				forceFit: true,
				height: offsetHeight - 50,
				padding: [0, 0, 0, 0]
				// padding: [0, 0, 0, -30]
			});
			// // 设置雷达图的缩放属性
			// chart.scale('value', {
			// 	// 缩放范围
			// 	range: [0, 100],
			// 	// 缩放类型，默认为 'linear' 线性缩放
			// 	type: 'linear',
			// 	// 缩放方式，默认为 'nice' 自适应缩放
			// 	nice: true,
			// 	// 缩放的刻度个数
			// 	tickCount: 5
			// });
			chart.source(dv, {
				'完成度': {
					min: 0,
					max: 100
				}
			});
			chart.coord('polar', {
				// radius: 0.8
				radius: 0.6
			});
			chart.axis('name', {
				line: null,
				tickLine: null,
				label: {
					autoRotate: false,
					autoHide: false, // 取消自动隐藏label
					formatter (text) {
						// 字符太长添加省略号
						return text.length > 20 ? `${text.slice(0, 20)}...` : text;
					}
				},
				grid: {
					lineStyle: {
						lineDash: null
					},
					hideFirstLine: false
				}
			});
			chart.axis('完成度', {
				line: null,
				tickLine: null,
				grid: {
					type: 'polygon',
					lineStyle: {
						lineDash: null
					}
				}
			});
			chart.legend(false);
			chart.line().position('name*完成度').color('#2d8cf0')
				.size(2).tooltip('name*完成度', (x, a) => {
					return {
						name: '完成度',
						value: `${a}%`
					}
				});
			chart.point().position('name*完成度').color('#2d8cf0')
				.shape('circle')
				.size(4)
				.style({
					stroke: '#fff',
					lineWidth: 1,
					fillOpacity: 1
				}).tooltip('name*完成度', (x, a) => {
					return {
						name: '完成度',
						value: `${a}%`
					}
				});
			chart.area().position('name*完成度').color('#2d8cf0').tooltip('name*完成度', (x, a) => {
				return {
					name: '完成度',
					value: `${a}%`
				}
			});
			chart.render();
		},
		hideSysLogo () {
    		this.showSysLogo = false;
    	},
	setStyle(){
    		let width = (window.innerHtml || document.documentElement.clientWidth);
    		let emEleHeight = Number(window.getComputedStyle(document.getElementById('ele1em')).height.replace('px',''));
      		this.fontSize = width/1519 * 14;
      		if(emEleHeight > this.fontSize){
      			this.disSub = true;
      			this.minFontSize = emEleHeight;
      		}
//			this.scale = (this.fontSize/14).toFixed(1);
			this.setTableColWidth();
    	},
		setPageMargin(){
    		let winWidth = (document.body.clientWidth || document.documentElement.clientWidth);
    		let pageWidth = Math.ceil(document.getElementsByClassName('page')[0].clientWidth);
    		let pageNum = Math.floor(winWidth/pageWidth);
    		let remainWidth = winWidth - pageWidth*pageNum;
    		let margin = Math.floor((remainWidth / (pageNum*2))-2) + 'px';
    		this.pageMargin = {
    			marginLeft: margin,
					marginRight: margin,
    		}
    	},
    	queryRecordByUid(){
            let params = {
//                  page:1,
//                  rows:2147483646, // 2147483647
            }
			let data = {
				userId:this.USER_ID
			}
            queryRecordByUid(params, data).then(res => {
                if(res.data.code == 1){
                    //this.recordList = res.data.data.items;
                    this.videoList = this.recordList.filter(record => record.type == 2);
                    this.courseList = this.recordList.filter(record => record.type == 0);
                    this.expList = this.recordList.filter(record => record.type == 1);
                    this.classCourseList = this.recordList.filter(record => record.type == 6);
                    this.videoPageInfo = this.getTypePage(this.videoList);
                    this.coursePageInfo = this.getTypePage(this.courseList);
                    this.expPageInfo = this.getTypePage(this.expList);
                    this.classCourseInfo = this.getTypePage(this.classCourseList);
                    console.log(this.videoPageInfo,this.coursePageInfo,this.expPageInfo,this.classCourseInfo);
                }else{
                    this.recordList = [];
                }
            })
        },
      //生成报告
      generateReport() {
        let _this = this;
        studentAbilityStatisticNew(this.USER_ID).then(res => {
          if (res.data.code == 1) {
            this.statisticsReportInfo = res.data.data;


            //this.recordList = res.data.data.items;
            // this.videoList = res.data.data.videoAbility.abilityList || [];
			this.videoList = []
			if(res.data.data.videoAbility.total) {
				for(let key in res.data.data.videoAbility.abilityListMap) {
					this.videoList = this.videoList.concat(res.data.data.videoAbility.abilityListMap[key])
				}
			}
            this.courseList = res.data.data.courseAbility.abilityList || [];
            // this.expList = res.data.data.expAbility.abilityList || [];
			if(res.data.data.expAbility.total) {
				for(let key in res.data.data.expAbility.abilityListMap) {
					this.expList = this.expList.concat(res.data.data.expAbility.abilityListMap[key])
				}
			}
            // this.classCourseList = res.data.data.classAbility.abilityList || [];
			this.classCourseList = []
			res.data.data.trainStatistic.forEach(ele => {
				ele.statisticTrainNumberVoList.forEach(el => {
					let obj = {}
					let type = ''
					// 0-讲课 1-作业 2-考试 3-教学
					if (el.egType === 'exam') {
						type = 2
					} else if (el.type === 1) {
						type = 1
					} else if (el.classType === 'teaching') {
						type = 3
					} else if (el.classType === 'prelection') {
						type = 0
					}
					if(el.type == 2) {
						// 考试
						let grade = ''
						let gradeArr = el.examScoreStatistic.dataList.filter(item => {
							return item.userId == this.USER_ID
						})
						if(gradeArr.length) {
							grade = gradeArr[0].grade
						}
						obj = {
							trainName: ele.trainName,
							type: type,
							name: el.name,
							startTime: el.startTime,
							examScoreStatistic: grade,
							totalScore: el.examScoreStatistic.paperScore
						}
					}else {
						obj = {
							trainName: ele.trainName,
							type: type,
							name: el.name,
							startTime: el.startTime,
							expGuideStatistic: el.expGuideStatistic.items.filter(item => {
								return item.userId == this.USER_ID
							})[0],
							expVideoStatistic: el.expVideoStatistic.items.filter(item => {
								return item.studentId == this.USER_ID
							})[0],
							answerStatistic: el.answerStatistic.items.filter(item => {
								return item.studentId == this.USER_ID
							})[0],
							expReportStatistic: el.expReportStatistic.items.filter(item => {
								return item.userId == this.USER_ID
							})[0]
						}
					}
					this.classCourseList.push(obj)
				})
			})
			this.skillTreeRoleCovered = res.data.data.skillTreeRoleCovered || [];
			this.scoresAndCovered = res.data.data.scoresAndCovered || [];
            this.studyTimeList = res.data.data.studyTimeList || [];
            let drillList = [];
            if(res.data.data.drillAbility.total > 0){
            	res.data.data.drillAbility.competeAbilityList.forEach(item => {
	            	if(item.total > 0){
	            		drillList = drillList.concat(item.abilityList)
	            	}
	            })
            }
            this.drillList = drillList.sort(this.timeSort);
            let competeList = [];
            if(res.data.data.contestAbility.total > 0){
            	res.data.data.contestAbility.competeAbilityList.forEach(item => {
	            	if(item.total > 0){
	            		competeList = competeList.concat(item.abilityList)
	            	}
	            })
            }
            this.competeList = competeList.sort(this.timeSort);
//          for(let i = 0;i<100;i++){
//          	this.competeList.push({name:'测试数据'+i,score:i});
//          }
            this.examList = (res.data.data.examAbility.abilityList || []).sort(this.timeSort);
            console.log(this.competeList,this.drillList);
            this.calcAllPage();
            console.log(this.videoPageInfo,this.coursePageInfo,this.expPageInfo,this.classCoursePageInfo);
            this.$nextTick(() => {
            	this.drawChart();
            });
            this.getSummary(res.data.data.summaryList||[])
          }

        })
      },
	  timeSort(pre, next) {
		let preTime = pre.startTime ? new Date(pre.startTime).getTime() : new Date().getTime()
		let nextTime = next.startTime ? new Date(next.startTime).getTime() : new Date().getTime()
		return preTime - nextTime
	},
      calcAllPage(){
      	    if(this.videoList.length > 0){
            	this.videoPageInfo = this.getTypePage(this.videoList,2);
            }
            if(this.courseList.length > 0){
            	this.coursePageInfo = this.getTypePage(this.courseList,2);
            }
            if(this.expList.length > 0){
            	this.expPageInfo = this.getTypePage(this.expList,2);
            }
            if(this.classCourseList.length > 0){
            	this.classCoursePageInfo = this.getTypePage1(this.classCourseList);
            }
            if(this.drillList.length > 0){
            	this.drillPageInfo = this.getTypePage(this.drillList,1);
            }
            if(this.competeList.length > 0){
            	this.competePageInfo = this.getTypePage(this.competeList,1);
            }
            if(this.examList.length > 0){
            	this.examPageInfo = this.getTypePage(this.examList,1);
            }
            this.$nextTick(() => {
	        	this.setPageMargin();
	        })
      },
      getTypePage(data,rowCount){
      	let tableHeight = document.getElementsByClassName('page2Content')[0].clientHeight - this.fontSize*2 - 40;
        tableHeight = 40 * this.fontSize - 50 + this.tableSizeHeight;
        let pageCount = rowCount *  Math.floor(tableHeight / (2.5*(this.fontSize*0.6 < 10 ? 10 : this.fontSize*0.6))); //每页条数
        let pageNum = Math.ceil(data.length/pageCount);
        let listPageNumArr = [];
        //this.pageRankNum = Math.floor(tableHeight / (2.5*(this.fontSize*0.6 < 10 ? 10 : this.fontSize*0.6)));
        //this.rankListPageNum = Math.ceil((data.length/Math.floor(tableHeight / (2.5*(this.fontSize*0.6 < 10 ? 10 : this.fontSize*0.6)))));
        //this.rankListPageNumArr = [];
        //console.log(this.rankListPageNum);
        for(let i=0;i<pageNum;i++){
        	listPageNumArr.push(i+'-'+new Date().getTime()+JSON.stringify(data));
        }
        return {
        	pageCount:pageCount,
        	pageNum:pageNum,
        	listPageNumArr:listPageNumArr
        }
      },
      downloadReports(){
      	let docs = document.getElementsByClassName("page");
        Array.from(docs).forEach(doc => {
        	this.downloadReport(doc);
        })
      },
      downloadReports(){
//    	this.disDownloadReport = true;
      	document.documentElement.scrollLeft = 0;
        document.documentElement.scrollTop = 0;
        let docs = document.getElementsByClassName("page");
      	let pdf = new jsPDF('p', 'pt', 'a4');
      	this.pageDataArr = [];
      	let proArr = Array.from(docs).map((doc,index) => {
	    	return this.htmlToCanvas(doc,index);
    	})
      	Promise.all(proArr).then(data => {
      		for(let i = 0; i< this.pageDataArr.length;i++){
   				let contentWidth = data[0].width;
                let contentHeight = data[0].height;
	            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
	            let imgWidth = 595;
	            let imgHeight = 595 / contentWidth * contentHeight;
	            pdf.addImage(this.pageDataArr[i], 'JPEG', 0, 0, imgWidth, imgHeight);
	            if(i < docs.length - 1){
	            	pdf.addPage();
	            }
          	}
          	setTimeout(() => {
          		pdf.save(this.USER_NAME + "学习评估报告.pdf");
//        		this.disDownloadReport = false;
          	},2000)
      	})
      },
      htmlToCanvas(doc,index){
      	return new Promise((resolve,reject) => {
	      	const box = window.getComputedStyle(doc);
	        // 获取DOM 节点计算后宽高
	        const width = box.width.replace('px','')
	        const height = box.height.replace('px','')
	        // 获取像素比
	        console.log(window.devicePixelRatio);
	        const scaleBy = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1;
	        html2canvas(doc,{
	        	scale:window.devicePixelRatio *2,
	        	width,
	        	height,
	        	scrollX:0,
	        	scrollY:0
	        }).then((canvas) => {
	          let pageData = canvas.toDataURL('image/jpeg', 1.0);
	//		  console.log(index,pageData);
			  this.pageDataArr[index] = pageData;
	          resolve(canvas);
	        }).catch(error => {

	        })
        })
      },
      downloadReport(doc) {
      	document.documentElement.scrollLeft = 0;
        document.documentElement.scrollTop = 0;
        html2canvas(doc).then((canvas) => {
          var contentWidth = canvas.width;
          var contentHeight = canvas.height;
          console.log(contentWidth,contentHeight);
          //一页pdf显示html页面生成的canvas高度;
          var pageHeight = contentWidth / 592 * 842;
          //未生成pdf的html页面高度
          var leftHeight = contentHeight;
          //页面偏移
          var position = 0;
          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          var imgWidth = 595;
          var imgHeight = 595 / contentWidth * contentHeight;

          var pageData = canvas.toDataURL('image/jpeg', 1.0);

          var pdf = new jsPDF('p', 'pt', 'a4');

          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围，无需分页
          if (leftHeight < pageHeight) {
            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
          } else {
            while (leftHeight > 0) {
              pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
              leftHeight -= pageHeight;
              position -= 842;
              //避免添加空白页
              if (leftHeight > 0) {
                pdf.addPage();
              }
            }
          }
          pdf.save(this.reportInfo.name + "报告.pdf");
        })
		},

		chartHtml (items) { // tooltip 提示版信息
			return '<div class="g2-tooltip" style="position:absolute;box-shadow: 1px 1px 2px 2px #eee;border-radius: 4px;padding: 6px 10px;font-size:10px">'
				+ '<div class="g2-tooltip-title" style="margin-bottom: 4px;">' + items[0].title
				+ '</div>'
				+ '<div class="g2-tooltip-title" style="margin-bottom: 4px;">' + items[0].point._origin.name
				+ '</div>'
				+ '<ul class="g2-tooltip-list" ><li><span style="width:5px;height:5px;background:' + items[0].color + ';border-radius:50%;margin-right:5px;display:inline-block"></span>' + items[0].name + '<span style="padding-left:26px;">' + items[0].value + '<span></li>'
				+ '</ul>'
				+ '</div>'
		},
		drawChart () {
			$("#learnCountStatistics").empty();
			$("#learnTimeStatistics").empty();
			$("#examAnalysis").empty();
			$("#drillScoreAnalysis").empty();
			$("#competeScoreAnalysis").empty();
			$("#userIntegral").empty();
			$("#skillTree").empty();
			$("#competeScor").empty();
			this.drawLearnCountChart();
			this.drawLearnTimeChart();
			this.drawExamChart();
			this.drawDrillChart();
			this.drawCompeteChart();
			this.initEchart()
			this.integralCover()
			this.skillCover()
		},
		drawLearnCountChart () {
					console.log('====',this.statisticsReportInfo);
        	const data = [
			  { type: '自学', value: this.statisticsReportInfo.courseAbility.total + this.statisticsReportInfo.videoAbility.total +  this.statisticsReportInfo.expAbility.total},
			  { type: '上课', value: this.getCount(this.statisticsReportInfo.trainStatistic) },
			  { type: '考试', value: this.statisticsReportInfo.examAbility.total },
			  // { type: '演练', value: this.statisticsReportInfo.drillAbility.total },
			  // { type: '竞赛', value: this.statisticsReportInfo.contestAbility.total },
			  // { type: '积分', value: 15 },
			  // { type: '积分名次', value: 9 }
			];
			const chart = new G2.Chart({
			  container: 'learnCountStatistics',
			  forceFit: true,
			  height: this.sizeConfigFooter * this.fontSize,
			  padding:'auto',
			  // padding:[0,10,20,65],
			});
			chart.source(data, {
			  value: {
			    max: this.maxValue(data),
			    min: 0,
			    nice: false,
			    alias: ''
			  }
			});
			chart.axis('type', {
			  label: {
			    textStyle: {
			      fill: '#999',
			      fontSize: 0.8*this.fontSize
			    }
			  },
			  tickLine: {
			    alignWithLabel: false,
			    length: 0
			  },
			  line: {
			    lineWidth: 0
			  }
			});
			chart.axis('value', {
			  label: null,
			  title: {
			    offset: 30,
			    textStyle: {
			      fontSize: 0.6*this.fontSize,
			      fontWeight: 300
			    }
			  }
			});
			chart.legend(false);
			chart.coord().transpose(); // 将坐标系 x 轴和 y 轴转置
			chart.interval().position('type*value').size(this.fontSize*1.2)
			  .color('type', [ '#00c0ff', '#19be6b','#ff9900','#4cecff','#ed4014'])
			  .opacity(1)
			  .label('value', {
			    textStyle: {
			      fill: '#8d8d8d'
			    },
			    offset: this.fontSize
			  });
			chart.render();
		},

        //学习时长统计
		drawLearnTimeChart () {
        let timeData = []
				this.studyTimeList.map(item => {
            // 隐藏竞赛和演练，别的都要。
            if(!(this.hideCompet && (item.name.includes('竞赛')||item.name.includes('演练')))){
              timeData.push({
                location:item.name,
                value: item.time,
                time:dayTime(item.time)
              })
            }
          
        	})
      
        const timeChart = new G2.Chart({
			  container: 'learnTimeStatistics',
			  forceFit: true,
			  height: this.sizeConfigFooter * this.fontSize,
			  padding: [0,80,10,0]
			});
			timeChart.source(timeData);
			timeChart.legend({
			  position: 'right-center',
			  offsetX: -1 * this.fontSize
			});
			timeChart.coord('theta', {
			  radius: 0.60 //饼大小
			});

			timeChart.tooltip({
				title:'location'
			});
			timeChart.intervalStack().position('value').color('location', [ '#00c0ff', '#19be6b','#ff9900','#ed4014','#4cecff'])
			  .style({
			    stroke: 'white',
			    lineWidth: 1
			  })
			  .label('value', val => {
			  	// return null;
			    if (val < 3) {
			      return null;
			    }
			    return {
			      offset: 10,
			      textStyle: {
			        fill: '#999',
			        fontSize: 12,
			        shadowBlur: 2,
			        shadowColor: 'rgba(0, 0, 0, .45)'
			      },
			      formatter: text => {
			        return getSeconds(text).slice(0,-3);
			      }
			    };
				}).tooltip('location*time', (location, time) => {
					return {
						name: location,
						value: time.slice(0,-3)
					}
				});
		    timeChart.render();
        },
        //考试成绩走势
        drawExamChart(){
					let _this = this;
        	const data = this.examList.map(compete => {
        		return {
        			year:compete.startTime,
        			value:compete.score,
        			name:compete.name
        		}
        	})
//      	const data = [
//			  { year: '1991-3-4 11:22:33', value: 3 },
//			  { year: '1992', value: 4 },
//			  { year: '1993', value: 3.5 },
//			  { year: '1994', value: 5 },
//			  { year: '1995', value: 4.9 },
//			  { year: '1996', value: 6 },
//			  { year: '1997', value: 7 },
//			  { year: '1998', value: 9 },
//			  { year: '1999', value: 13 }
//			];
			const chart = new G2.Chart({
			  container: 'examAnalysis',
			  forceFit: true,
			  height: this.sizeConfigFooter * this.fontSize,
			  padding:'auto'
			});
			chart.source(data);
			chart.scale('value', {
				alias: '得分',
			  min: 0
			});
			chart.scale('year', {
			  range: [ 0, 1 ]
			});
			chart.tooltip({
			  crosshairs: {
			    type: 'line'
				},
				useHtml:true,
				htmlContent: function (title, items) {
					return _this.chartHtml(items)
				}
			});
			chart.line().position('year*value');
			chart.point().position('year*value')
			  .size(4)
			  .shape('circle')
			  .style({
			    stroke: '#fff',
			    lineWidth: 1
			  });
			chart.render();
        },
        //演练得分走势
        drawDrillChart(){
					let _this = this;
        	const data = this.drillList.map(compete => {
        		return {
        			year:compete.startTime,
        			value:compete.score,
        			name:compete.name,
        		}
        	})
//      	 const data = [
//			  { year: '1991-3-4 11:22:33', value: 3 },
//			  { year: '1992', value: 4 },
//			  { year: '1993', value: 3.5 },
//			  { year: '1994', value: 5 },
//			  { year: '1995', value: 4.9 },
//			  { year: '1996', value: 6 },
//			  { year: '1997', value: 7 },
//			  { year: '1998', value: 9 },
//			  { year: '1999', value: 13 }
//			];
			const chart = new G2.Chart({
			  container: 'drillScoreAnalysis',
			  forceFit: true,
			  height: this.sizeConfigFooter * this.fontSize,
			  padding:'auto'
			});
			chart.source(data);
			chart.scale('value', {
				min: 0,
				alias: '得分'
			});
			chart.scale('year', {
			  range: [ 0, 1 ]
			});
			chart.tooltip({
			  crosshairs: {
			    type: 'line'
				},
				useHtml:true,
				htmlContent: function (title, items) {
					return _this.chartHtml(items)
				}
			});
			chart.line().position('year*value');
			chart.point().position('year*value')
			  .size(4)
			  .shape('circle')
			  .style({
			    stroke: '#fff',
			    lineWidth: 1
			  });
			chart.render();
        },
        //竞赛得分走势
        drawCompeteChart(){
					let _this = this;
        	const data = this.competeList.map(compete => {
        		return {
        			year:compete.startTime,
        			value:compete.score,
        			name:compete.name
        		}
        	})
//      	 const data = [
//			  { year: '1991-3-4 11:22:33', value: 3 },
//			  { year: '1992', value: 4 },
//			  { year: '1993', value: 3.5 },
//			  { year: '1994', value: 5 },
//			  { year: '1995', value: 4.9 },
//			  { year: '1996', value: 6 },
//			  { year: '1997', value: 7 },
//			  { year: '1998', value: 9 },
//			  { year: '1999', value: 13 }
//			];
			const chart = new G2.Chart({
			  container: 'competeScoreAnalysis',
			  forceFit: true,
			  height: this.sizeConfigFooter * this.fontSize,
			  padding:'auto'
			});
			chart.source(data);
			chart.scale('value', {
				alias: '得分',
			  min: 0
			});
			chart.scale('year', {
			  range: [ 0, 1 ]
			});
			chart.tooltip({
			  crosshairs: {
			    type: 'line'
				},
				useHtml:true,
				htmlContent: function (title, items) {
					return _this.chartHtml(items)
				}
			});
			chart.line().position('year*value');
			chart.point().position('year*value')
			  .size(4)
			  .shape('circle')
			  .style({
			    stroke: '#fff',
			    lineWidth: 1
			  });
			chart.render();
        },
        // 返回值：arg1加上arg2的精确结果
		accAdd(arg1, arg2) {
		    let r1, r2, m;
		    try {
		        r1 = arg1.toString().split(".")[1].length
		    } catch (e) {
		        r1 = 0
		    };
		    try {
		        r2 = arg2.toString().split(".")[1].length
		    } catch (e) {
		        r2 = 0
		    };
		    m = Math.pow(10, Math.max(r1, r2));
		    return (arg1 * m + arg2 * m) / m
		},

		// 返回值：arg1减去arg2的精确结果
		accSub(arg1, arg2) {
		    let r1, r2, m, n;
		    try {
		        r1 = arg1.toString().split(".")[1].length
		    } catch (e) {
		        r1 = 0
		    };
		    try {
		        r2 = arg2.toString().split(".")[1].length
		    } catch (e) {
		        r2 = 0
		    };
		    m = Math.pow(10, Math.max(r1, r2));
		    // 动态控制精度长度
		    n = (r1 >= r2) ? r1 : r2;
		    return ((arg1 * m - arg2 * m) / m).toFixed(n);
		},
      zoomIn(){
      	if(this.scale == 0.5){
      		return
      	}
      	this.scale = this.accSub(this.scale,0.1);
      	if(this.scale != 0){
      		this.fontSize = this.fontSize - 0.5;
      	}
      	this.drawChart();
        this.calcAllPage();
      	console.log(this.fontSize);
      },
      zoomOut(){
      	if(this.scale == 3){
      		return
      	}
      	this.scale = this.accAdd(this.scale,0.1);
      	if(this.scale != 0){
      		this.fontSize = this.fontSize + 0.5;
      	}
      	this.drawChart();
      	this.calcAllPage();
      	console.log(this.fontSize);
      },
      setScale(){

      },
      getCurPageShow(index,dataList,pageInfo){
      	return dataList.slice(index*pageInfo.pageCount,(index+1) * pageInfo.pageCount)
      },
			makeListRows(index,dataList,pageInfo){
				let list = this.getCurPageShow(index,dataList,pageInfo);
				let aa =  list.map((item,index)=>{
					if(index==0){
						return 0
					}else if(index%2==0){
						return index/2;
					}
				}).filter(f=>f!=null)
				return aa;
		},
			//创建水印底板
			addWaterMark (str) {
				let ctx = document.createElement("canvas");
				ctx.width = 300;
				ctx.height = 300;
				ctx.style.display = "none";
				let cans = ctx.getContext("2d");
				cans.rotate((-20 * Math.PI) / 180);
				cans.font = "12px Microsoft YaHei";
				cans.fillStyle = "rgba(0, 0, 0, .2)";
				cans.textAlign = "left";
				cans.textBaseline = "Middle";
				cans.fillText(str, 10, 130);
				cans.save();
				return ctx.toDataURL();
		}
    },
    destroyed() {

    }
  }
</script>

<style scoped>
#competeScor,
#userIntegral{
	width: 100%;
}
#skillTree{
	width: 100%;
}
	#compReport {
    /*padding: 40px 60px;*/
  	background: #f1f4fd;
  }

  .compReportHeader {
    text-align: center;
    border-bottom: 1px solid rgb(212, 216, 225);
  }

  .reportTitle {
    text-align: center;
    font-weight: bold;
    font-size: 22px;
  }

  .reportInfo {
    margin: 30px 0;
  }

  .reportInfo span {
    padding-right: 22px;
  }
  .reportContent{
  	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top:80px;
  }
  .reportContent .title {
    position: relative;
    margin: 46px 0;
    background: linear-gradient(90deg, rgb(234, 241, 255), #fff);
    height: 38px;
    line-height: 38px;
    border-radius: 5px;
  }

  .reportContent .title i {
    position: absolute;
    top: 9px;
    left: -2.5px;
    width: 5px;
    height: 20px;
    background: #2f70ff;
    border-radius: 10px;
  }

  .reportContent .title span {
    font-weight: bold;
    font-size: 18px;
    padding-left: 14px;
  }

  #rankTable {
    /*border-radius: 10px;*/
    border: none;
    border: none;;
    /*box-shadow: 0 0 1px 1px #ddd;*/
  }
  #rankTable .ivu-table,#rankTable .ivu-table th{
  	background-color:transparent;
  	height: 2.5em;
  }
  .downBtn {
    padding: 0px;
    float: right;
    margin-right: 60px;
  }
    /*.ivu-table-body{
        max-height :calc(100vh - 228px);
        overflow:hidden auto;
    }*/
   .reportHeader{
	   	height:54px;
	   	line-height:54px;
	   	padding:0 44px;
	   	background:#fff;
	   	box-shadow:0px 0px 5px #ccc;
	   	position: fixed;
	    top: 0px;
	    width: 100%;
	    background:#fff;
	    z-index:999;
   }
   .reportContent .page{
   	  position:relative;
   	  /*background:url('../../../../assets/exam/bg.jpg') no-repeat;
   	  background-size:100%;*/
   	  box-shadow: 0 0 5px #ccc;
   	  width:42.5em;
   	  height:60.143em;
   	  margin:1.85em 0;
   	  padding:2.14em;
   }
   .pageBg{
   	  position: absolute;
   	  top: 0;
   	  left:0;
   	  width:100%;
   	  height:100%;
   }
   .pageWrap{
   	  position: absolute;
      left: 1.85em;
      right: 1.85em;
      top: 1.85em;
      bottom: 1.85em;
      z-index: 2;
      color: #515a6e;
   }
	 .pageWrap{
		padding: 0px !important;
		margin: 0px !important;
	 }

 .report-page-table /deep/ .ivu-table th {
    color: #515a6e;
    background: #f8f8f9;
  }
.report-page-table  /deep/ .ivu-table {
    color: #515a6e;
  }
.report-page-table /deep/ .ivu-table td {
  border: none;
  border-bottom: 1px solid #333;
  background: #fff;
  }


  .page2 .pageContent,.page3 .pageContent{
     height:42em;
     min-height: 470px;
  }
  .page2 .pageContent .chart{
     height:96%;
     width:98%;
     border: 1px solid #bbbdbc;
     /*border-radius: 5px;*/
   }
   .page3 .pageContent{
   		padding:1em;
   		border:1px solid #b3b3b3;
   		overflow:hidden;
   }
   .page .pageFooter{
   	   font-size:0.8em;
   	   /*height:4.8em;*/
   	   margin-top:2em;
   }
   .pageFooter .dot{
	   	width: 2px;
	    height: 2px;
	    /*padding: 1px;*/
	    background: #515a6e;
	    border-radius: 50%;
	    display: inline-block;
	    vertical-align: middle;
	    margin: 2px;
   }
   .page1 .pageHeader{
   	  margin-bottom:6em;
   }
   .page1 .itemLabel{
        display: inline-block;
        /*height: 36px;*/
        width: 4.5em;
        text-align: justify;
        vertical-align: top;
        text-align-last: justify;
        font-size:1em;
        color:#666;
    }
    /*.page1 .itemLabel::after {
        display: inline-block;
        width: 100%;
        content: '';
        height: 0;
    }*/
    .page1 .itemValue{
    	margin-left:1em;
    	font-size:1em;
    	/*font-weight:bold;*/
    	color:#333;
    }
    .page1 .examInfo p{
    	border-bottom: 1px solid #d8dde0;
    	margin-top: 1em;
    	padding:.5em 0;
    }
    .avatar{
    	text-align: center;
    	margin:4em;
    }
    .avatar .avatar-bg{
			position: relative;
			top: 0px;
			left: 0px;
    	display: inline-block;
    	width:12em;
    	height:10em;
    	/* background: url('../../assets/report/avatar-bg.png') no-repeat; */
    	/* background-size: contain; */
    }
    .avatar img{
			width:8em;
    	height:8em;
    	border-radius: 50%;
    	position: absolute;
    	top:50%;
    	left:50%;
			transform: translate(-63%,-49%);
    	/* border:.3em solid #abb0b6; */
    }
  .listItem{
  	font-size: 0.6em;
    height: 100%;
    line-height: 2.5em;
  }
	.listItem:nth-child(odd){
		padding-right:6px;
	}
	.listItem:nth-child(even){
		padding-left: 6px;
	}
	.itemRow{
		padding: 10px 0;
		height: auto;
		overflow: visible;
		word-break: break-all;
		border-bottom: 1px dashed #ccc;
	}
</style>
<style>
	#rankTable .ivu-table{
		font-size:0.6em;
	}
    #rankTable .ivu-table,#rankTable .ivu-table th,#rankTable .ivu-table td{
  		background-color:transfer!important;
    }
    #rankTable .ivu-table th,#rankTable .ivu-table td{
  		height: 2.5em;
    }
    #rankTable thead tr th {
    	background-color:#f5f5f5!important;
    	border: none;
    }
    #rankTable tbody tr td {
    	border: none;
    	background-color:transparent!important;
    	border-bottom:1px dashed #ccc;
    }
    #rankTable .ivu-table-overflowX{
  		overflow: hidden;
    }
    #rankTable .ivu-table:before,
	#rankTable .ivu-table:after {
	    background-color: transparent;
	}
	.page3Content .ivu-table,
	.page3Content .ivu-table th{
		color: #515a6e !important;
    font-size: 12px !important;
	}
  .page3Content .ivu-table th{
    font-weight: 700;
  }
  .report-summary{
    padding: 0 0 10px 0;
    line-height: 1.5;
  }
  .report-item-sum{
    color: #515A6E;
    text-indent: 2em;
    letter-spacing: 1px;
    padding-bottom: 4px;
    text-align: justify;
  }
  .report-item-sum span{
      color: #cd8431;
    /*color: #57a3f3;*/
    font-weight: 500;
  }
</style>
